<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标签页</title>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body>
		<div class="container">
			<ul id="myTab" class="nav nav-tabs">
				<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
				<li><a href="#profile" data-toggle="tab">Profile</a></li>
				<li class="dropdown">
					<a href="#" id="myTableDrop1" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#dropone" tabindex="-1" data-toggle="tab">noe</a></li>
						<li><a href="#droptow" tabindex="-1" data-toggle="tab">tow</a></li>
					</ul>
				</li>
			</ul>
			<!--淡入淡出的效果  fade in active /fade -->
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane  fade in active" id="home">
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
				</div>
				<div class="tab-pane fade" id="profile">
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
				</div>
				<div class="tab-pane" id="dropone">
					<p>one-你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
				</div>
				<div class="tab-pane" id="droptow">
					<p>tow -你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
					<p>你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...你好世界...</p>
				</div>
			</div>
			
		</div>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript"> 
			//$("#myTab a:last").tab("show");
			
			$("#myTab li:eq(1) a").tab("show");
			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
              alert("切换了...");
             })
		</script>
	</body>
</html>
